<style scoped>
.expand-row {
  margin-bottom: 16px;
}
</style>

<template>
  <div>
    <Row class="expand-row">
      <Col span="8">
        <span class="expand-key">Job: </span>
        <span class="expand-value">{{ row.job }}</span>
      </Col>
      <Col span="8">
        <span class="expand-key">Interest: </span>
        <span class="expand-value">{{ row.interest }}</span>
      </Col>
      <Col span="8">
        <span class="expand-key">Birthday: </span>
        <span class="expand-value">{{ row.birthday }}</span>
      </Col>
    </Row>
    <Row>
      <Col span="8">
        <span class="expand-key">Favorite book: </span>
        <span class="expand-value">《{{ row.book }}》</span>
      </Col>
      <Col span="8">
        <span class="expand-key">Favorite movie: </span>
        <span class="expand-value">{{ row.movie }}</span>
      </Col>
      <Col span="8">
        <span class="expand-key">Favorite music: </span>
        <span class="expand-value">{{ row.music }}</span>
      </Col>
    </Row>
  </div>
</template>

<script>
  export default {
    props: {
      row: Object
    }
  };
</script>